<template>
  <div class="course-opening">
    <div class="class-wrap">
      <el-row :gutter="20">
        <el-col :span="12" v-for="item in tableData" :key="item.id">
          <el-card class="box-card" shadow="hover">
            <div class="class-item">
              <div class="change-course">
                <span class="el-icon-refresh" @click="handleChangeCourse(item)"
                  >切换课程</span
                >
              </div>
              <div
                class="title sheng"
                :title="
                  item.semesterName +
                  item.schoolName +
                  item.majorsName +
                  item.teacherName +
                  item.className
                "
              >
                {{ item.semesterName }}
                {{ item.schoolName }}
                {{ item.majorsName }}
                {{ item.teacherName }}
                {{ item.className }}
              </div>
              <div class="box">
                <div class="img-box">
                  <img :src="coverImg(item)" alt="" />
                </div>
                <div
                  class="txt-box"
                  v-if="item.courseList && item.courseList.length"
                >
                  <div class="title">{{ item.courseList[0].title }}</div>
                  <div class="teacher">主讲：{{ item.teacherName }}</div>
                  <div class="course-hour"
                    >完成课时/总课时：0/{{ item.totalCourseHours || 0 }}</div
                  >
                  <div class="btns">
                    <el-button
                      type="primary"
                      plain
                      size="small"
                      @click="handleAddCourse(item)"
                      >添加课程</el-button
                    >
                    <el-button
                      type="primary"
                      plain
                      size="small"
                      @click="handleLearning(item)"
                      >开始上课</el-button
                    >
                    <el-button
                      type="primary"
                      plain
                      size="small"
                      @click="handleManage(item)"
                      >课程管理</el-button
                    >
                  </div>
                </div>
                <div class="txt-box" v-else>
                  <div class="course-hour">该班还未开课</div>
                  <div class="btns">
                    <el-button
                      type="primary"
                      plain
                      size="small"
                      @click="handleAddCourse(item)"
                      >添加课程</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <Pagination
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
  </div>
</template>
<script>
import { eduTeachingQuery } from '@/api/admin/teach/eduTeaching.js'
import Bus from '@/utils/bus.js'
export default {
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
      },
      tableData: [],
      pageObj: {},
    }
  },
  computed: {
    coverImg() {
      return (row) => {
        if (row.courseList && row.courseList.length > 0) {
          let { sysCourse } = row.courseList[0]
          if (sysCourse && sysCourse.sysAttachment) {
            return sysCourse.sysAttachment.httpUrl
          }
        }
        let { defaultCourseImg } = this.$store.getters
        return defaultCourseImg
      }
    },
  },
  mounted() {
    this.getList()
    Bus.$on('refreshClassroomList', (v) => {
      if (v) {
        Object.assign(this.listQuery, v)
      }
      this.getList()
    })
  },
  beforeDestroy() {
    Bus.$off('refreshClassroomList')
  },
  methods: {
    async getList() {
      let res = await eduTeachingQuery()
      this.tableData = res.data.data
      this.pageObj = res.data
    },
    handleAddCourse(row) {
      Bus.$emit('showDialogCourseAdd', row)
    },
    handleChangeCourse(row) {
      Bus.$emit('changeCourse', row.id)
    },
    handleManage(row) {
      this.$router.push({ name: 'online-course-manage', query: { id: row.id } })
    },
    handleLearning(row) {
      let routeUrl = this.$router.resolve({
        name: 'teaching',
        query: { id: row.id },
      })
      window.open(routeUrl.href, '_blank')
    },
  },
}
</script>
<style scoped lang="scss">
.course-opening {
  .class-wrap {
    .box-card {
      margin-bottom: 20px;
      background: #f9f9f9;
      .class-item {
        position: relative;
        .change-course {
          position: absolute;
          right: 0px;
          top: 0px;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.3s;
          &:hover {
            color: var(--colorH1);
          }
        }
        .title {
          font-size: 14px;
          font-weight: bold;
          color: #333;
          width: calc(100% - 100px);
        }
        .img-box {
          position: absolute;
          left: 0px;
          top: 40px;
          width: 260px;
          height: 150px;
          border: 1px solid #eee;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .txt-box {
          padding-left: 280px;
          height: 160px;

          .btns {
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>